import { Modal, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { addFriend } from "@/api/friendship";

interface AddFriendModalProps {
    isOpen: boolean;
    handleClose: Function;
}
export interface AddFriend {
    username: string;
    reason: string;
}
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}


export function AddFriendModal(props: AddFriendModalProps) {
    const [form] = useForm();

    const handleOk = async () => {
        await form.validateFields();
        const values = form.getFieldsValue();

        try {
            await addFriend(values);
            message.success('好友申请已发送');
            form.resetFields();
            props.handleClose();
        } catch (error: any) {
            message.error(error?.data?.message || '系统繁忙，请稍后重试');
        }
    }

    return <Modal
        title='添加好友'
        open={props.isOpen}
        onOk={handleOk}
        okText='发送好友申请'
        onCancel={() => { props.handleClose(); form.resetFields() }}
        cancelText='取消'
    >
        <Form
            form={form}
            colon={false}
            {...layout}
        >
            <Form.Item label='用户名' name='username' rules={[{ required: true, message: '请输入用户名' }]}>
                <Input />
            </Form.Item>
            <Form.Item label='添加理由' name='reason' rules={[{ required: true, message: '请输入添加理由' }]}>
                <Input.TextArea />
            </Form.Item>
        </Form>
    </Modal>
}